import Taro from "@tarojs/taro";
import { Text } from "@tarojs/components";

import ByRow from "@/components/ui/ByRow";
import Card from "@/components/common/Card";
import ByText from "@/components/ui/ByText";
import Moment from "@/components/app/Moment";
import ListView from "@/components/app/ListView";
import UserItem from "@/components/app/UserItem";

import useEnum from "@/hooks/useEnum";
import useList from "@/hooks/useList";
import ApiFinance from "@/api/finance";
import ByCol from "@/components/ui/ByCol";
import Money from "@/components/app/Money";

// 状态(0-草稿,1-已提交,2-已审核,3-已支付,4-已驳回)

const enumStatusOptions = [
  { label: "待审核", value: 1, color: "warning" },
  { label: "已通过", value: 2, color: "success" },
  // { label: "已支付", value: 3, color: "primary" },
  { label: "已驳回", value: 3, color: "error" },
];

export default ({ intentCustomerId }: { intentCustomerId: number }) => {
  const { loading, list } = useList<any>(ApiFinance.getPayrollApplyRecordList, {
    defaultParams: [{ intentCustomerId }],
  });

  const { getOption } = useEnum(enumStatusOptions);

  return (
    <>
      <ListView loading={loading} isEmpty={!list?.length}>
        {list?.map((item) => (
          <Card
            className="m-3"
            key={item.businessId}
            onClick={() =>
              Taro.navigateTo({
                url: `/packageWork/pages/wages/detail?wl_id=${item.workFlowInstanceId}&intentCustomerId=${intentCustomerId}`,
              })
            }
          >
            <ByRow content="between">

              <Text>工人工费</Text>

              <ByText type={getOption(item.status, "color")}>
                {getOption(item.status, "label")}
              </ByText>
            </ByRow>

            <ByText size="sm" className="my-2">{item.projectName}</ByText>
            <ByRow>
              <ByCol span={6}>
                <ByText size="sm">本次申请：{item.payAmount}</ByText>
              </ByCol>
              <ByCol span={6}>
                <ByText size="sm">总额：
                  <Money value={item.payAmount}></Money>
                </ByText>
              </ByCol>
            </ByRow>

            <ByRow content="between" className="my-2">
              <ByText type="second" size="sm">
                {item.customerName}
              </ByText>
              {/* <ByText>地址</ByText> */}
            </ByRow>

            <ByRow content="between">
              <UserItem size={60} name={item.createUserName} />
              <Moment value={item.createDate} />
            </ByRow>
          </Card>
        ))}
      </ListView>
    </>
  );
};
